<template>
  <view class="container">
    <view class="wrapper">
      <view class="title">
        短信登录
      </view>
      <view class="input-content">
        <u-form :model="form" ref="uForm" label-width="150">
          <u-form-item label="账号">
            <u-input placeholder="请输入您的邮箱或者手机号" v-model="form.account"/>
          </u-form-item>
          <u-form-item class="captcha_box" label="图形验证码">
            <u-input v-model="form.captcha_code" placeholder="请输入验证码" class="input"/>
            <image slot="right" class="captcha" @click="getCaptcha()" :src="captcha.img"></image>
          </u-form-item>
          <u-form-item label="验证码">
            <u-input class="input-code" v-model="form.code" border :maxlength="6" type="number"
                     placeholder="请输入验证码"/>
            <u-button type="primary" slot="right" :disabled="!get_code" @click="getCode()">{{ code_text }}</u-button>
          </u-form-item>
        </u-form>
      </view>
      <button type="primary" class="confirm-btn" :disabled="!form.agree" @click="submit()">登录</button>
      <view class="xieyi">
        <u-checkbox class="xiey-checkbox" v-model="form.agree"></u-checkbox>
        <text>登录即代表同意</text>
        <text class="xiey-link" @click="gotoPath('/pages/packageA/h5/article?key=register',false)">《注册协议》
        </text>
        <text class="xiey-link" @click="gotoPath('/pages/packageA/h5/article?key=privacy',false)">《隐私政策》
        </text>
      </view>
    </view>

  </view>
</template>

<script>
import api from "@/common/code_api";
import {login} from "@/common/code_api";
import {code_login} from "@/common/user_api";

export default {
  data() {
    return {
      is_wx: false,
      form: {
        agree: false,
        account: '',
        code: '',
        captcha_key: '',
        captcha_code: '',
      },
      code_text: '获取验证码',
      get_code: true,
      captcha: {},
      mobile: '',
      password: '',
    };
  },
  onLoad() {
    this.getCaptcha()
  },
  methods: {
    getCaptcha() {
      api.captcha().then(res => {
        this.captcha = res.data.captcha
      })
    },
    submit() {
      this.form.captcha_key = this.captcha.key
      if (!this.form.account) {
        this.$u.toast('请输入账号');
        return;
      }
      if (!this.form.code) {
        this.$u.toast('请输入验证码');
        return;
      }
      if (!this.form.captcha_code) {
        this.$u.toast('请输入图形验证码');
        return;
      }
      //必须是手机号或者邮箱
      if (!this.form.account.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/) && !this.form.account.match(/^1[3456789]\d{9}$/)) {
        this.$u.toast('请输入正确的邮箱或者手机号');
        return;
      }

      code_login(this.form).then(res => {
        this.$u.toast(res.msg);
        if (res.code !== 0) {
          return
        }
        let that = this
        uni.setStorageSync('UserToken', res.data.token)
        this.$store.commit('setToken', res.data.token)
        this.$store.dispatch('getUserInfo').then(res => {
          return that.gotoPath('/pages/index/index', true, null, 2)
        })
      })
    },
    getCode() {
      if (!this.form.account) {
        this.$u.toast('请输入登录账号');
        return;
      }
      //验证邮箱
      if (!this.form.account.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/) && !this.form.account.match(/^1[3456789]\d{9}$/)) {
        this.$u.toast('请输入正确的邮箱或者手机号');
        return;
      }
      this.get_code = false
      this.form.captcha_key = this.captcha.key
      login(this.form).then(res => {
        if (res.code == 0) {
          this.$u.toast(res.msg);
          //倒计时
          let count = 60;
          let timer = setInterval(() => {
            this.code_text = count + 's';
            count--;
            if (count < 0) {
              clearInterval(timer);
              this.code_text = '重新获取';
              this.get_code = true
            }
          }, 1000);
        } else {
          this.$u.toast(res.msg);
          this.getCaptcha()
          this.get_code = true
        }
      }).catch(() => {
        this.get_code = true
      })
    },
  }
}
</script>

<style lang='scss'>
.container {
  padding-top: 50px;
  width: 100vw;
  height: 100vh;
  background: #fff;

  .u-image {
    width: 150rpx;
    height: 150rpx;
  }
}

.wrapper {
  background: #fff;
  padding-bottom: 40upx;
}

.xieyi {
  margin-top: 30rpx;
  margin-left: 30rpx;
}

.title {
  text-align: center;
  margin-bottom: 100rpx;
  font-size: 46upx;
  color: #555;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
}

.input-content {
  padding: 0 60upx;
}

.xiey-link {
  color: #2b85e4;
}

.input-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 30upx;
  background: $page-color-light;
  height: 120upx;
  border-radius: 4px;
  margin-bottom: 50upx;

  &:last-child {
    margin-bottom: 0;
  }

  .tit {
    height: 50upx;
    line-height: 56upx;
    font-size: $font-sm+2upx;
    color: $font-color-base;
  }

  input {
    height: 60upx;
    font-size: $font-base + 2upx;
    color: $font-color-dark;
    width: 100%;
  }
}

.confirm-btn {
  width: 630upx;
  height: 76upx;
  line-height: 76upx;
  border-radius: 50px;
  margin-top: 70upx;
  background: #177ade;
  color: #fff;
  font-size: $font-lg;

  &:after {
    border-radius: 100px;
  }
}

.confirm-btn-wx {
  width: 630upx;
  height: 76upx;
  line-height: 76upx;
  border-radius: 50px;
  margin-top: 70upx;
  color: #fff;
  font-size: $font-lg;
  background: $uni-theme-color;

  &:after {
    border-radius: 100px;
  }
}


.register-section {
  position: absolute;
  left: 0;
  bottom: 50upx;
  width: 100%;
  font-size: $font-sm+2upx;
  color: $font-color-base;
  text-align: center;

  text {
    color: $uni-theme-color;
    margin-left: 10upx;
  }

  .forget-section {
    font-size: $font-sm+2upx;
    color: blue;
    text-align: center;
    margin-left: 20rpx;
  }
}

.captcha_box {
  .input {
  }

  .captcha {
    width: 240rpx;
    height: 72rpx;
  }
}

.wx {
  text-align: center;
  margin: 40rpx auto auto;
}
</style>
